import { memo } from 'react';
import type { ReactNode, FC } from 'react';
import { SongListV1Wrapper } from './style';
import ListHeaderV2 from '../list-header-v2';
import { useAppDispatch } from '@/store/hooks';
import { fetchSongDetail } from '@/views/player/store/player';
import { formatTime, getImgOnSize } from '@/utils/format';
interface IProps {
  children?: ReactNode;
  currentSong: {
    allCount: number;
    playCount: number;
    songs: any[];
  };
  rank?: boolean;
}

const SongListV1: FC<IProps> = (props) => {
  const { currentSong, rank = true } = props;
  const dispatch = useAppDispatch();
  return (
    <SongListV1Wrapper>
      <ListHeaderV2
        name={'歌曲列表'}
        trackCount={`${currentSong.allCount}首歌`}
        count={currentSong.playCount}
      ></ListHeaderV2>
      <table>
        <thead>
          <tr>
            <th style={{ width: '10%' }}></th>
            <th style={{ width: '50%' }}>
              <div className="table_head">标题</div>
            </th>
            <th style={{ width: '15%' }}>
              <div className="table_head">时长</div>
            </th>
            <th style={{ width: '25%' }}>
              <div className="table_head">歌手</div>
            </th>
          </tr>
        </thead>
        <tbody className={rank ? 'third' : ''}>
          {currentSong.songs.map((track: any, index: number) => {
            function handlePlayClick(ids: number): void {
              dispatch(fetchSongDetail({ ids, play: true }));
            }
            function handleAddClick(ids: number): void {
              dispatch(fetchSongDetail({ ids, play: false }));
            }
            return (
              <tr key={index}>
                <td>
                  <div className="r-index">
                    <span>{index + 1}</span>
                    {rank && <i className="sprite_icon2"></i>}
                  </div>
                </td>
                <td>
                  {rank && index < 3 && <img src={getImgOnSize(track.al.picUrl, 50)}></img>}
                  <a className="sprite_table player" onClick={() => handlePlayClick(track.id)}>
                    1
                  </a>
                  <a href="javascript:void(0)">{track.name}</a>
                </td>
                <td>
                  <span className="allTime">{formatTime(track.dt / 1000)}</span>
                  <div className="ctrl">
                    <a className="sprite_icon2 add" onClick={() => handleAddClick(track.id)}></a>
                    <a
                      className="sprite_table favorite"
                      onClick={(e) => {
                        e.preventDefault();
                      }}
                    ></a>
                    <a
                      className="sprite_table share"
                      onClick={(e) => {
                        e.preventDefault();
                      }}
                    ></a>
                    <a
                      className="sprite_table download"
                      onClick={(e) => {
                        e.preventDefault();
                      }}
                    ></a>
                  </div>
                </td>
                <td>
                  <span className="ar_name">{track.ar[0].name}</span>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </SongListV1Wrapper>
  );
};

export default memo(SongListV1);
